<template>
  <div class="home">
    <div class="box">
      <dv-loading v-if="flag">Loading...</dv-loading>
      <div class="wrap" v-else>
        <div class="tab">
          <dv-decoration-10 style="width: 250px; height: 3px" />
          <dv-decoration-8
            style="width: 130px; height: 30px; color: '#4168b2'"
          />
          <div>
            <p class="shuju">数据可视化平台</p>
            <dv-decoration-6 style="width: 200px; height: 10px" />
          </div>

          <dv-decoration-8 :reverse="true" style="width: 130px; height: 30px" />
          <dv-decoration-10
            style="width: 250px; height: 3px; transform: rotate(180deg)"
          />
        </div>
        <div class="tab-buttom">
          <div class="left">
            <div class="left1">数据分析1</div>
            <div class="left2">数据分析2</div>
          </div>
          <div class="right">
            <div class="right1">vue-big-screen</div>
            <div class="right2">2022-09-06 周二 14:46:11</div>
          </div>
        </div>
        <div class="center">
          <dv-border-box-12>
            <p>
              <!-- <v-icon name="user" class="user"></v-icon> -->
              <span>任务通过率</span>
              <dv-decoration-3 style="width: 50px; height: 19px" />
            </p>
            <echarts></echarts>
          </dv-border-box-12>
          <dv-border-box-12>
            <p>
              <!-- <v-icon name="user" class="user"></v-icon> -->
              <span>地图数据</span>
              <dv-decoration-3 style="width: 50px; height: 19px" />
            </p>
          </dv-border-box-12>
          <dv-border-box-8 :reverse="true" style="height: 210px">
            <div class="box1">
              <div class="border-box">
                <p>今年累计任务次数</p>
                <dv-digital-flop
                  :config="num"
                  style="width: 100%; height: 50%"
                />
              </div>
              <div class="border-box">
                <p>今年累计任务次数</p>
                <dv-digital-flop
                  :config="num"
                  style="width: 100%; height: 50%"
                />
              </div>
              <div class="border-box">
                <p>今年累计任务次数</p>
                <dv-digital-flop
                  :config="num"
                  style="width: 100%; height: 50%"
                />
              </div>
              <div class="border-box">
                <p>今年累计任务次数</p>
                <dv-digital-flop
                  :config="num"
                  style="width: 100%; height: 50%"
                />
              </div>
              <div class="border-box">
                <p>今年累计任务次数</p>
                <dv-digital-flop
                  :config="num"
                  style="width: 100%; height: 50%"
                />
              </div>
              <div class="border-box">
                <p>今年累计任务次数</p>
                <dv-digital-flop
                  :config="num"
                  style="width: 100%; height: 50%"
                />
              </div>
            </div>

            <div class="bottom">
              <div class="bottom-left">
                <dv-scroll-ranking-board
                  :config="config33"
                  style="width: 100%; height: 120px"
                />
              </div>
              <div class="bottom-right">
                <div class="top" style="width: 100%">
                  <div class="top-left">
                    <p style="font-size: 1px">今日任务通过率</p>
                    <dv-decoration-9 style="width:60px;height:60px;">66%</dv-decoration-9>
                  </div>
                  <div class="top-right">
                    <p style="font-size: 1px">今日任务达标率</p>
                    <dv-decoration-9 style="width:60px;height:60px;">66%</dv-decoration-9>
                  </div>
                </div>
                <div class="center">
                  <dv-water-level-pond
                    :config="config4"
                    style="width: 80%;height:50px;margin:auto; "
                  />
                </div>
              </div>
            </div>
          </dv-border-box-8>

          <dv-border-box-12 style="width: 190px">
            <p style="font-size: #257dff">产品销售分析</p>
            <dv-capsule-chart :config="configs" style="width: 100%" />
          </dv-border-box-12>
          <dv-border-box-12>
            <p>任务完成排行榜</p>
            <dv-scroll-board
              :config="config"
              style="width: 100%; height: 90%; font-size: 12px"
            />
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from '../components/index.vue'
export default {
  components:{
    echarts
  },
  data() {
    return {
      flag: true,

      data: [],
    };
  },
  mounted() {
    setTimeout(() => {
      this.flag = false;
    }, 500);
    this.config = {
      data: [
        [
          '<span style="color:#37a2da;font-size:8px">行1列1</span>',
          "行1列2",
          "行1列3",
        ],
        ["行2列1", '<span style="color:#32c5e9;">行2列2</span>', "行2列3"],
        ["行3列1", "行3列2", '<span style="color:#67e0e3;">行3列3</span>'],
        ["行4列1", '<span style="color:#9fe6b8;">行4列2</span>', "行4列3"],
        ['<span style="color:#ffdb5c;">行5列1</span>', "行5列2", "行5列3"],
        ["行6列1", '<span style="color:#ff9f7f;">行6列2</span>', "行6列3"],
        ["行7列1", "行7列2", '<span style="color:#fb7293;">行7列3</span>'],
        ["行8列1", '<span style="color:#e062ae;">行8列2</span>', "行8列3"],
        ['<span style="color:#e690d1;">行9列1</span>', "行9列2", "行9列3"],
        ["行10列1", '<span style="color:#e7bcf3;">行10列2</span>', "行10列3"],
      ],
      index: true,
      columnWidth: [40],
      align: ["center"],
      header: ["组件", "分支", "覆盖率"],
    };
    this.configs = {
      data: [
        {
          name: "南阳",
          value: 167,
        },
        {
          name: "周口",
          value: 67,
        },
        {
          name: "漯河",
          value: 123,
        },
        {
          name: "郑州",
          value: 55,
        },
        {
          name: "西峡",
          value: 98,
        },
      ],
    };
    this.num = {
      number: [120],
      toFixed: 1,
      style: {
        fontSize: 12,
      },
    };
    this.config33 = {
      data: [
        {
          name: "周口",
          value: 55,
        },
        {
          name: "南阳",
          value: 120,
        },
        {
          name: "西峡",
          value: 78,
        },
        {
          name: "驻马店",
          value: 66,
        },
        {
          name: "新乡",
          value: 80,
        },
        {
          name: "信阳",
          value: 45,
        },
        {
          name: "漯河",
          value: 29,
        },
      ],
      unit: "人",
    };
    this.config4 = {
      data: [45],
      shape: "roundRect",
    };
  },
};
</script>
<style lang="scss" scoped>
.box {
  padding: 20px 20px;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  background-color: black;
}
.wrap {
  color: white;

  .tab {
    display: flex;
    height: 50px;
    justify-content: center;
    .dv-decoration-8 {
      color: #4168b2;
    }
    .shuju {
      width: 100%;
      line-height: 40px;
      text-align: center;
    }
  }
  .tab-buttom {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    .left {
      height: 30px;
      line-height: 30px;
      width: 40%;
      display: flex;
      .left1 {
        flex: 1;
        background-color: #0f1325;
        margin-right: 10px;
      }
      .left2 {
        width: 40%;
        text-align: center;
        background-color: #0f1325;
        transform: skew(45deg);
      }
    }
    .right {
      height: 30px;
      line-height: 30px;
      width: 40%;
      display: flex;
      .right1 {
        flex: 1;
        background-color: #1a5cd7;
        transform: skew(-45deg);
        text-align: center;
        margin-right: 30px;
      }
      .right2 {
        width: 40%;
        text-align: center;
        background-color: #0f1325;
      }
    }
  }
  .center {
    display: flex;
    .dv-border-box-12 {
      width: 14%;
      height: 210px;
      padding: 10px;
      box-sizing: border-box;
      p {
        display: flex;
        .user {
          font-size: 30px;
          color: white;
          margin-right: 5px;
        }
        span {
          font-size: 8px;
          margin-right: 5px;
        }
      }
    }
    .dv-border-box-8 {
      flex: 1;
      display: flex;
      justify-content: space-between;
      // flex-wrap: wrap;
      .box1 {
        display: flex;
        flex-wrap: wrap;
        font-size: 8px;
        .border-box {
          width: 30.3%;
          height: 30px;
          margin: 5px;
          background-color: #0f1325;
          float: left;
          p {
            color: #1a5cd7;
          }
        }
      }
      .bottom {
        width: 100%;
        display: flex;
        margin-left: 5px;
        .bottom-left {
          width: 50%;
          
          
          .dv-scroll-ranking-board {
            margin-top: 5px;
          }
        }
        .bottom-right {
          width: 50%;
          .top {
            display: flex;
            width: 100%;
            .top-left {

              text-align: center;
              width: 50%;
              .dv-decoration-9{
            margin: auto;
          }
              p {
                font-size: 8px;
              }
            }
          }
        }
      }
    }
    dv-scroll-board {
      font-size: 10px;
    }
  }
}
</style>
